Ext.onReady(function(){													
	var panel = new Ext.Panel({
	    id:'contentPanel',
	    baseCls:'x-plain',
	    renderTo: 'content',
	    layout:'table',
	    layoutConfig: {columns:2},						
	    // applied to child components
	    //defaults: {frame:true, width:200, height: 200},
	    items:[{
	        title:'Home',
			width: 1350,
			height: 410,
			contentEl: 'contentForm',
			style:{
				padding: '5px'
			}
	    }]
	});

				
	var mainPanel= new Ext.Window({
	    title: 'Window',
		region: 'center',
	    closable: false,
		//autoHeight: false,
		//autoWidth: true,
		hidden: false,
        //height:450,
        //width: 500,
        //bodyStyle: 'padding:10px',
        contentEl: 'content',
        autoScroll: true,
		resizable: false,
		draggable: false,
		style: {
			width: '100%'
		},
        tbar: new Ext.Toolbar({
            enableOverflow: true,
            items: [{
                xtype:'splitbutton',
                text: 'Tabel',
                iconCls: 'add16',
                //handler: handleAction.createCallback('Menu Button'),
                menu: [{
					text: 'Tabel Users',
					handler: function(){
						window.location="/rciapp/user/Users.action";											
					}
				},{
					text:'Tabel Dosen'
				}]
	            },'-',{
	                xtype:'splitbutton',
	                text: 'Cut',
	                iconCls: 'add16',
	                //handler: handleAction.createCallback('Cut'),
	                menu: [{text: 'Cut menu'}]
	            },{
	                text: 'Copy',
	                iconCls: 'add16'
	                //handler: handleAction.createCallback('Copy')
	            },{
	                text: 'Paste',
	                iconCls: 'add16',
	                menu: [{text: 'Paste menu'}]
	            },'-',{
	                text: 'Format',
	                iconCls: 'add16',
	                handler: function(){										
						Ext.get('contentForm').load({
							url:'Users.action?coba=',
							text:'Loading',
							script:true
						});										
					}
	            },'->',{
	                text: 'Right',
	                iconCls: 'add16'
	            }]
	        }),
	        bbar: new Ext.ux.StatusBar({
    		id: 'form-statusbar',
            defaultText: 'Ready'
            //,plugins: new Ext.ux.ValidationStatus({form:'formUser'})
	        })
    	});
										
        // NOTE: This is an example showing simple state management. During development,
        // it is generally best to disable state management as dynamically-generated ids
        // can change across page loads, leading to unpredictable results.  The developer
        // should ensure that stable state ids are set for stateful components in real apps.        
        new Ext.Viewport({
            layout: 'border',
            items: [												
            // create instance immediately
            new Ext.BoxComponent({
                region: 'north',
                height: 80, // give north and south regions a height
                autoEl: {
                    tag: 'div',
                    html:'<br><br>&nbsp;<font color:#fff>For Development only <span onmouseout="style.border=dotted 0px #96b181" onmouseover="style.border=dotted 1px #96b181" style="border: 0px dotted rgb(150, 177, 129);"><A href="http://localhost:8888/rciapp/doc/DoxExtJs.action" title="PHP AdminPanel">Documentation ExtJs</A></span></font>'
                }
            }), mainPanel
			]
        });
    });